<template>
  <div class="header-wrap">
    <div class="header-nav-container bid-flex-y">
      <div class="header-cotent bid-flex">
        <div class="logo-wrap">
          <img src="../assets/image/nav_logo.png" alt="" srcset="" />
        </div>
        <div class="platform-info-wrap">
          <p class="b-name-ch">全国招投标品牌调研公示服务平台</p>
          <p class="b-name-en">
            National bidding brand research and publicity service platform
          </p>
          <p class="platform-intro">
            为招标投标行业服务，共享品牌价值研究成果，公示市场最新动态，发布主体行业权威数据
          </p>
        </div>
      </div>
    </div>
    <div class="nav-wrap-container">
      <div class="nav-wrap">
        <ul class="nav-container bid-flex">
          <li class="nav-item" v-for="(item, index) in navData" :key="index">
            <router-link :to="item.path" active-class="is-selected">{{
              item.titleText
            }}</router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "header-nav",
  data() {
    return {
      navData: [
        {
          titleText: "首页",
          path: "/index"
        },
        {
          titleText: "招标公告",
          path: "/bid-notice"
        },
        {
          titleText: "专题活动",
          path: "/subject-activity"
        },
        {
          titleText: "政策法规",
          path: "/policy-laws"
        },
        {
          titleText: "新闻资讯",
          path: "/news-information"
        },
        {
          titleText: "行业动态",
          path: "/industry-trends"
        },
        {
          titleText: "品牌榜单",
          path: "/brand-list"
        },
        {
          titleText: "企业公示",
          path: "/company-publicity"
        },
        {
          titleText: "增值服务",
          path: "/value-service"
        },
        {
          titleText: "VR展厅",
          path: "/vr-exhibition"
        },
        {
          titleText: "会议展览",
          path: "/meet-exhibition"
        },
        {
          titleText: "关于我们",
          path: "/about-us"
        }
      ]
    };
  }
};
</script>
<style scoped>
.header-nav-container {
  justify-content: center;
  height: 1.8rem;
  background-image: url("../assets/image/header_nav_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.header-cotent {
  margin-left: 3.6rem;
  color: #fff;
}

.logo-wrap {
  width: 1.16rem;
}

.logo-wrap img {
  width: 100%;
}

.platform-info-wrap {
  margin-left: 0.28rem;
  justify-content: space-between;
}

.b-name-ch {
  font-size: 0.36rem;
}

.b-name-en {
  margin-top: 0.13rem;
  font-size: 0.15rem;
}

.platform-intro {
  margin-top: 0.25rem;
  font-size: 0.15rem;
}

.nav-wrap-container {
  background-color: #1571ba;
}

.nav-container {
  overflow: hidden;
}

.nav-wrap {
  margin: 0 3.6rem;
}

.nav-item {
  width: 1rem;
  height: 0.66rem;
  line-height: 0.66rem;
  text-align: center;
}

.nav-item a {
  display: block;
  font-size: 0.2rem;
  text-align: center;
  color: #fff;
}

.is-selected {
  background: #1a86dc;
}
</style>
